@import "common/mixin";
html{font-size: $mainSize;height: 100%;overflow: hidden;background: #eee;}
body{
  background: #eee;width: 100%;height: 100%;overflow: hidden;color:#272636;
  //这个是右边的层
  .r_blackbg{position: absolute;left: 0;top: 0;background: rgba(0,0,0,.5);width: 100%;height: 100%;display: none;z-index: 9999;}
  //body加上onTouch移动
  &.onTouch{
    .ql_container_main{
      @include translateset(translateX(80%));
    }
    .r_blackbg{display: block;}
  }

}
.ql_container{
  height: 100%;width:100%;overflow: hidden;max-width: 960px;margin: 0 auto;
  .ql_container_main{
    height: 100%;width: 100%;position: relative;@include transition(all 1s);
    //left-start
    .ql_container_l{
      width: 80%;position: absolute;background: #f4f4f4;left: -80%;height: 100%;overflow: hidden;
      .ql_container_l_main{
        height: 100%;width: 100%;overflow-y: auto;overflow-x:hidden;
        //l_top-start
        .l_top{
          width: 100%;height: u(440px);padding-top: u(84px);text-align: center;
          .l_heardImg{
            width: u(274px);height: u(274px);@include u_radius(u(274px));background-color: #296946;display: inline-block;position: relative;background-image: url('/static/images/web/boy.png');background-size: contain;background-position: center bottom;background-repeat: no-repeat;
            .l_myNum{
              position: absolute;width: u(70px);height: u(70px);right: u(20px);bottom: 0;line-height: u(90px);overflow: hidden;color: #296946;
              i{font-size: 35px;}
            }
            .l_myNumShow{
              position: absolute;width: u(70px);height: u(70px);right: u(20px);bottom: 0;line-height: u(90px);overflow: hidden;color: #fefb00;font-size: 12px;
            }
          }
        }
        //l_top-end
        .l_btnList{
          &>ul{
            margin-top: u(20px);background: #fff;padding-left: u(84px);
            &>li{
              height: u(84px); border-top: 1px solid #eee;line-height: u(84px);padding-right: u(30px);
              .btnlist_header{position: absolute;left: u(-84px);top:0;height: u(84px);width: u(84px);line-height: u(84px);text-align: center;}
              &:first-child{border-top: 1px solid transparent;}
            }
            &:first-child{margin-top: 0;}
          }
        }
      }
    }
    //left-end
    //right-start
    .ql_container_r{
      width: 100%;background: #fff;height: 100%;overflow: hidden;padding-bottom: u(100px);
      .ql_container_r_main{
        height: 100%;width: 100%;overflow-y: auto;overflow-x:hidden;
        //qlr_header-start
        .qlr_header{
          height: u(100px);background:#296946;line-height: u(100px);
          .qlr_heightone{
            height: u(100px);width:u(30px);line-height: u(100px);position: absolute;left: u(5px);top:0;color: #fff;text-align: center;
            i{font-size: u(36px);color:rgba(255,255,255,.5);}
          }
          .qlr_minimgsrc{width: u(72px);height:u(72px);margin-top: u(14px);@include u_radius(72px);background-repeat: no-repeat;background-position: center;background-size: contain;background-image: url('/static/images/web/boy.png');}
          .plr_sendNum{position: absolute;width: 8px;height: 8px;@include u_radius(8px);background: #f00;left: 28px;top:u(20px);}
        }
        //qlr_header-end
        //qlr_active-start
        .qlr_active{height: u(300px);background: #eee;}
        //qlr_active-end
        //qlr_btngroup-start
        .qlr_btngroup{
          height: u(150px);background: $white;width: 100%;
          ul{
            height: 100%;border-top: 1px solid #dddddd;
            li {
              width: 33.3333%;  float: left;  height: 100%;  text-align: center;  font-size: 14px;
              i {
                font-size: 40px;
              }
              .createGameBtb{color:#0f9d58;}
              .cityGameBtb{color:#ff004d;}
              .createUserBtb{color:#0f4b9d;}
            }
          }
        }
        //qlr_btngroup-end
        //qlr_game-start
        .qlr_game_main{
          height: u(80px);background: #f4f4f4;line-height: u(80px);border: 1px solid #ddd;
          .qlr_game_title{font-size: 16px;}
          .qlr_game_title_more{
            height: 100%;overflow: hidden;color: #aaa;
          }
        }
        //qlr_game-end
        //game_list-start
        .game_list{
          li{height: u(162px);border-bottom:1px solid #ddd;}
          .game_leftNum{position: absolute;right: 0;top: u(50px); font-size:14px;color:#ff004d;}
          .game_rightNum{position: absolute;left: 0;top: u(50px); font-size:14px;color:#0f9d58;}
          .game_headrimg{
            img{width: 100%;}
          }
          .prl_gamestart{
            padding: 2px 4px;font-size: 12px;background: #45c01a;color: $white;display: inline-block;@include u_radius(4px);
          }
          .prl_gameend{
            padding: 2px 4px;font-size: 12px;display: inline-block;@include u_radius(4px);background: #f1f1f1;color:#272636;border:1px solid #ddd;
          }
        }
        //game_list-end
      }
    }
    //right-end
  }
  //fixbtn
  .fixbtn{
    position: fixed;bottom: 0;left:0;height: u(100px);width: 100%;background:$white;
    ul{
      height: 100%;border-top: 1px solid #dddddd;
      li {
        width: 33.3333%;
        float: left;
        height: 100%;
        text-align: center;
        font-size: 14px;
        i {font-size: 30px;}
        &.on {
          color: #296946;
        }
      }
    }
  }
}
.w33bl{width: 33.33333%;}
.w20bl{width: 20%; }
.w50bl{width: 50%;}
.col_ff004d{color:#ff004d;}
.col_bbbbbb{color:#bbb;}
.col_dddddd{color:#ddd;}
.col_33ac71{color:#33ac71;}
.h60l60{height: u(60px);line-height: u(60px);}
.fixdialog{
  position: fixed;left: 0;top: 0;z-index: 10000;width: 100%;height: 100%;background: #f4f4f4;overflow: hidden;
  .dialog_main{
    height: 100%;overflow: auto;
    .dialog_title{height: u(82px);line-height: u(82px);background: $white;}
    .dialog_return{position: absolute;left: u(30px);top:0;width: u(82px);height: u(82px);}
    .dialog_right{position: absolute;right: u(30px);top: 0;height: u(82px);}
    .create_game{
      background: $white;border-bottom: 1px solid #ddd;
      li{
        border-bottom: 1px solid #ddd;
        &:last-child{border-bottom: 1px solid transparent;  }
        input{height: u(74px);line-height: u(74px);font-size: 12px;width: 100%;}
        select{height: u(74px);line-height: u(74px);display: inline-block;outline: 0;  width: 100%;  font-size: 14px;  background: #fff;border: 0;text-indent: 0;font-size: 12px;  }
        .showType{position: absolute;left: u(-50px);height: u(74px);width: u(50px);line-height: u(74px);}
      }
    }
    .dialog_caozuo{
      border-top:1px solid #ddd;border-bottom: 1px solid #ddd;background: #fff;
    }
    .user_list{
      border-top: 1px solid #ddd;
      img{width: 100%;}
      li{
        .user_Num_icon{
          position: absolute;  width: u(44px);  height: u(44px);  right: 0;  bottom: 0;  line-height: u(44px);  overflow: hidden;  color: #296946;
        }
        .user_Num{
          position: absolute; width: u(44px);  height: u(44px);  right: 0;  bottom: 0;line-height: u(44px);color: $white;
        }
        .leave_bg{
          position: absolute;width: 100%;height: 100%;left: 0;top:0;background: rgba(255,255,255,0.5);display: none;z-index: 1;
        }
        &.leaveOn{
          .user_Num_icon{color:#ccc;}
          .leave_bg{display: block;}
        }
      }
    }
    .game_base_Num{
      height: u(162px);border-bottom:1px solid #ddd;background: $white;
      .game_leftNum{position: absolute;right: 0;top: u(50px); font-size:14px;color:#ff004d;}
      .game_rightNum{position: absolute;left: 0;top: u(50px); font-size:14px;color:#0f9d58;}
      .game_headrimg{
        max-width: 150px;
        img{width: 100%;}
      }
      .prl_gamestart{
        padding: 2px 4px;font-size: 12px;background: #45c01a;color: $white;display: inline-block;@include u_radius(4px);
      }
      .prl_gameend{
        padding: 2px 4px;font-size: 12px;display: inline-block;@include u_radius(4px);background: #f1f1f1;color:#272636;border:1px solid #ddd;
      }
    }
    .dialog_createBtn{height: u(86px);line-height: u(86px);background: #33ac71;font-size: 20px;color: $white;text-align: center;@include u_radius(4px);}
    .dialog_leaveBtn{height: u(86px);line-height: u(86px);background: #ddd;font-size: 20px;border:1px solid #bbb;color:#bbb;text-align: center;@include u_radius(4px);}
    .user_item{
      .bottomgreen{width: 100%;height: 2px;background:#45c01a;left: 0;bottom: -1px;position: absolute;display: none; }
      &.on{
        .bottomgreen{display: block;}
      }

    }
  }
}
.dialog_tips_main{
  position: fixed;left: 0;top: 0;z-index: 10001;width: 100%;height: 100%;overflow: hidden;
  .dialog_tips_bgblack{position: absolute;z-index: 1;width: 100%;height: 100%;background: rgba(0,0,0,.5);}
  .dialog_tips_bgopacity{position: absolute;z-index: 1;width: 100%;height: 100%;}
  .dialog_tips_main_h{
    height: 100%;overflow: auto;position: relative;z-index: 2;padding: 0 u(20px);
    .dialog_tips_title{
      height: u(60px);line-height: u(60px);border-top:1px solid #ddd;border-left:1px solid #ddd;border-right:1px solid #ddd;background: #33ac71;
      color:$white;
    }
    .dialog_tips_body{
      min-height: 20px;background: $white;border:1px solid #ddd;
    }
    .dialog_tips_footer{
      height: u(60px);line-height: u(60px);background: #bbb;border-bottom:1px solid #ddd;border-left:1px solid #ddd;border-right:1px solid #ddd;
    }
    .dialog_tips_showdia{position: absolute;left: 50%;top:50%;width: 100%;max-width: 200px;height: 60px;@include translateset(translate(-50%,-50%));background: rgba(0,0,0,.5);color: $white;line-height: 60px;@include u_radius(10px);}
  }

}
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
  html{font-size:($mainSize*1.17);}
}
//iphone6 plus
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
  html{font-size:($mainSize*1.29);}
}
@media (min-device-width : 737px){
  html{font-size:($mainSize*1.4);}
}